<template>
  <div class="relative f-c-c wh-full">
    <dark-mode-switch class="absolute left-48 top-24 z-3 text-20" />
    <n-card
      :bordered="false"
      size="large"
      class="z-4 !w-auto rounded-20 shadow-sm"
    >
      <div class="w-300 sm:w-360">
        <header f-b-c>
          <system-logo text="64 primary" />
          <n-gradient-text type="primary" :size="28">
            {{ appName }}
          </n-gradient-text>
        </header>
        <main class="pt-24px">
          <n-gradient-text type="primary" class="text-18px font-medium">
            {{ activeModule.label }}
          </n-gradient-text>
          <div class="pt-24px">
            <transition
              enter-from-class="translate-x--30 opacity-0"
              leave-to-class="translate-x-30 opacity-0"
              mode="out-in"
              appear
            >
              <component
                :is="activeModule.component"
                class="duration-300"
              />
            </transition>
          </div>
        </main>
      </div>
    </n-card>
    <login-bg />
  </div>
</template>

<script lang="tsx" setup>
import { CodeLogin, LoginBg, PwdLogin, ResetPwd } from "./components";

const route = useRoute();
const appName = import.meta.env.VITE_APP_NAME;

const modules: { [key: string]: any } = {
  "pwd-login": { label: "密码登录", component: PwdLogin },
  "code-login": { label: "验证码登录", component: CodeLogin },
  "reset-pwd": { label: "重置密码", component: ResetPwd },
};

const activeModule = computed(() => {
  const moduleKey = route.query.module as string;
  return modules[moduleKey] || modules["pwd-login"];
});
</script>